<template>
  <div style="background: linear-gradient(to bottom, #2193b0, #6dd5ed);">
    <div class="title">canvas学习展示</div>
    <div style="display:flex;justify-content: center;align-items: center;">
      <router-link to="/" style="text-decoration: none;">
        <el-button type="primary">返回首页</el-button>
      </router-link>
    </div>
    <!-- canvas 画布默认大小是 300 * 150 -->
    <div class="canvas-container">
      <div class="canvas_box" v-for="(item, index) in data" :key="index">
        <div class="left_box">
          <canvas :id=item.uid width='180' height='180'>
            浏览器版本过低，请升级浏览器
          </canvas>
        </div>
        <div class="right_box" :id="item.id">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
let data = [
  { id: 0, uid: 'canvas0', name: "空心矩形(strokeRect)" },
  { id: 1, uid: 'canvas1', name: "实心矩形(fillRect)" },
  { id: 2, uid: 'canvas2', name: "空心圆形(arc)" },
  { id: 3, uid: 'canvas3', name: "实心圆形(arc)" },
  { id: 4, uid: 'canvas4', name: "线条(moveTo,lineTo,stroke)" },
  { id: 5, uid: 'canvas5', name: "实心文字(fillText)" },
  { id: 6, uid: 'canvas6', name: "图片(drawImage)" },
  { id: 7, uid: 'canvas7', name: "描边文字(strokeText)" },
  { id: 8, uid: 'canvas8', name: "加粗文字(lineWidth)" },
  { id: 9, uid: 'canvas9', name: "椭圆(ellipse)" },
  { id: 10, uid: 'canvas10', name: "三角形(moveTo,lineTo,lineTo,lineTo,closePath)" },
  { id: 11, uid: 'canvas11', name: "折线图" },
  { id: 12, uid: 'canvas12', name: "贝塞尔曲线(quadraticCurveTo)" },
  { id: 13, uid: 'canvas13', name: "线性渐变(createLinearGradient)" },
  { id: 14, uid: 'canvas14', name: "径向渐变(createRadialGradient)" },
  { id: 15, uid: 'canvas15', name: "逐帧裁剪动画(drawImage)" },
  { id: 16, uid: 'canvas16', name: "柱状图" },
  { id: 17, uid: 'canvas17', name: "环状图" },
  { id: 18, uid: 'canvas18', name: "缩放(scale)" },
  { id: 19, uid: 'canvas19', name: "旋转(rotate)" },
  { id: 20, uid: 'canvas20', name: "平移(translate)" },
  { id: 21, uid: 'canvas21', name: "变形(transform)" },
  { id: 22, uid: 'canvas22', name: "状态保存复用(save(),restore())" },
  { id: 23, uid: 'canvas23', name: "点击画布可清除画布(clearRect(x,y,width,height),)" },
  { id: 24, uid: 'canvas24', name: "电子签名" },
  { id: 25, uid: 'canvas25', name: "随机验证码,点击可切换" },


]
// dom节点挂载完成后触发
onMounted(() => {
  // 0.canvas空心矩形
  let canvas = document.querySelector("#canvas0");
  let ctx = canvas.getContext("2d");
  ctx.strokeStyle = "red";// 设置填充颜色
  ctx.strokeRect(0, 0, 50, 50);// fill:填充 ;Rect:矩形(x轴,y轴,width宽,height高)
  ctx.strokeStyle = "blue";
  ctx.strokeRect(50, 0, 50, 50);
  ctx.strokeStyle = "green";
  ctx.strokeRect(0, 50, 50, 50);
  ctx.strokeStyle = "yellow";
  ctx.strokeRect(50, 50, 50, 50);

  // 1.canvas绘制实心矩形
  let ctx1 = document.getElementById("canvas1").getContext("2d");
  ctx1.fillStyle = "blue";
  ctx1.fillRect(0, 0, 100, 100);

  // 2.canvas绘制空心圆形
  let canvas2 = document.getElementById("canvas2");
  let ctx2 = canvas2.getContext("2d");
  ctx2.beginPath();// 新增绘制作用域
  // 圆的弧度 = 2πr/r = 2π = Math.PI * 2 , 每一弧度 = Math.PI * 2 / 360 = Math.PI / 180
  ctx2.arc(90, 90, 50, 0, Math.PI / 180 * 360, true);// arc(x轴,y轴,r半径,起始弧度,终止弧度,方向：true为逆时针，false为顺时针)
  ctx2.stroke();

  // 3.canvas绘制实心圆形
  let canvas3 = document.getElementById("canvas3");
  let ctx3 = canvas3.getContext("2d");
  ctx3.arc(90, 90, 50, 0, Math.PI / 180 * 360, false);
  ctx3.fillStyle = "yellow";
  ctx3.fill();

  // 4.canvas绘制线条
  let canvas4 = document.getElementById("canvas4");
  let ctx4 = canvas4.getContext("2d");
  ctx4.beginPath();
  ctx4.moveTo(0, 0);
  ctx4.lineTo(45, 90);
  ctx4.lineTo(90, 45);
  ctx4.lineTo(180, 90);
  // ctx4.closePath();// closePath:自动闭合起点和终点的路径
  ctx4.stroke();

  // 5.canvas绘制实心文本
  let canvas5 = document.getElementById("canvas5");
  let ctx5 = canvas5.getContext("2d");
  ctx5.font = "30px Arial";// 设置字体大小和字体
  ctx5.fillStyle = "blue";
  ctx5.fillText("Hello World", 10, 90);

  // 6.canvas绘制图片
  let canvas6 = document.getElementById("canvas6");
  let ctx6 = canvas6.getContext("2d");
  let img = new Image();// 创建一个图片对象
  img.src = "https://www.baidu.com/img/bd_logo1.png";// 设置图片的src属性
  img.onload = function () {
    ctx6.drawImage(img, 0, 0, 180, 90);// drawImage:绘制图片 ;img:图片对象 ;x,y:图片的坐标 ;width,height:限制图片的宽高
  };

  // 7.canvas绘制描边文本
  let canvas7 = document.getElementById("canvas7");
  let ctx7 = canvas7.getContext("2d");
  ctx7.font = "30px Arial";
  ctx7.strokeStyle = "blue";
  ctx7.strokeText("Hello World", 10, 90);

  // 8.canvas绘制加粗文本
  let canvas8 = document.getElementById("canvas8");
  let ctx8 = canvas8.getContext("2d");
  ctx8.font = "30px Arial";
  ctx8.lineWidth = 5;// 设置线条宽度
  ctx8.strokeStyle = "blue";
  ctx8.strokeText("Hello World", 10, 90);// strokeText:绘制描边文本 ;text:文本内容 ;x,y:文本的坐标

  // 9.canvas绘制椭圆
  let canvas9 = document.getElementById("canvas9");
  let ctx9 = canvas9.getContext("2d");
  // ellipse:绘制椭圆(x,y圆心坐标,rx,ry椭圆的x轴半径,y轴半径,rotation旋转角度,startAngle开始弧度,endAngle结束弧度,anticlockwise是否逆时针)
  ctx9.ellipse(90, 90, 40, 60, 0, 0, Math.PI * 2, false);
  ctx9.fillStyle = "red";
  ctx9.fill();

  // 10.canvas绘制三角形
  let canvas10 = document.getElementById("canvas10");
  let ctx10 = canvas10.getContext("2d");
  ctx10.beginPath();
  ctx10.moveTo(0, 0);
  ctx10.lineTo(90, 0);
  ctx10.lineTo(90, 90);
  ctx10.closePath();
  ctx10.fillStyle = "green";
  ctx10.fill();

  // 11.canvas绘制折线图
  let canvas11 = document.getElementById("canvas11");
  let ctx11 = canvas11.getContext("2d");
  // 坐标系的尺寸
  const w_11 = 180;
  const h_11 = 180;
  // 网格的尺寸
  const gw_11 = 10;
  const gh_11 = 10;
  // 网格的行数和列数
  const row_11 = Math.floor(w_11 / gw_11);// 向下取整
  const col_11 = Math.floor(h_11 / gh_11);
  // 绘制网格行
  for (let i = 0; i <= row_11; i++) {
    ctx11.beginPath();// 开启独立的绘制路径
    ctx11.moveTo(0, i * gh_11);
    ctx11.lineTo(w_11, i * gh_11);
    ctx11.strokeStyle = "#eee";// 设置线条颜色
    ctx11.stroke();
  }
  // 绘制网格列
  for (let i = 0; i <= col_11; i++) {
    ctx11.beginPath();
    ctx11.moveTo(i * gw_11, 0);// moveTo:移动到某个坐标点 ;x,y:坐标点
    ctx11.lineTo(i * gw_11, h_11);// lineTo:绘制线 ;x,y:终点坐标
    ctx11.strokeStyle = "#eee";// 设置线条颜色
    ctx11.stroke();
  }
  // 绘制x轴箭头线
  ctx11.beginPath();
  ctx11.strokeStyle = "#000";// 设置线条颜色
  ctx11.moveTo(gw_11, gh_11);
  ctx11.lineTo(gw_11, h_11 - gh_11);
  ctx11.stroke();
  // 绘制y轴箭头线
  ctx11.beginPath();
  ctx11.strokeStyle = "#000";// 设置线条颜色
  ctx11.moveTo(gw_11, gh_11);
  ctx11.lineTo(w_11 - gw_11, gh_11);
  ctx11.stroke();
  // 绘制x轴箭头
  ctx11.beginPath();
  ctx11.fillStyle = "#000";// 设置线条颜色
  ctx11.moveTo(w_11, gh_11);
  ctx11.lineTo(w_11 - gw_11, gh_11 * 0.5);
  ctx11.lineTo(w_11 - gw_11, gh_11 * 1.5);
  ctx11.closePath();
  ctx11.fill();
  // 绘制x轴箭头
  ctx11.beginPath();
  ctx11.fillStyle = "#000";// 设置填充颜色
  ctx11.moveTo(gw_11, h_11);
  ctx11.lineTo(gw_11 * 0.5, h_11 - gh_11);
  ctx11.lineTo(gw_11 * 1.5, h_11 - gh_11);
  ctx11.closePath();
  ctx11.fill();

  // 绘制x轴和y轴的文字
  ctx11.font = "16px Arial";// 设置字体大小和字体
  ctx11.fillStyle = "#000";// 设置填充字体颜色
  ctx11.textAlign = "center";// 设置文字的对齐方式
  ctx11.textBaseline = "middle";// 设置文字的基线方式
  ctx11.fillText("x", w_11 - gw_11 * 1.5, gh_11 * 2);// fillText:绘制文本 ;text:文本内容 ;x,y:文本的坐标
  ctx11.fillText("y", gw_11 * 2, h_11 - gh_11 * 1.5);
  ctx11.fillText("折线图", w_11 * 0.5, gh_11 * 3);

  // 可以将折现提取成数组，然后再用for循环来绘制，这样可以提高效率
  let arr_11 = [
    { color: 'red', arrData: [{ x: gw_11, y: gh_11 }, { x: gw_11 * 4, y: gh_11 * 4 }, { x: gw_11 * 5, y: gh_11 * 14 }, { x: gw_11 * 10, y: gh_11 * 9 }, { x: gw_11 * 18, y: gh_11 * 18 }] },
    { color: 'blue', arrData: [{ x: gw_11, y: gh_11 }, { x: gw_11 * 2, y: gh_11 * 10 }, { x: gw_11 * 5, y: gh_11 * 4 }, { x: gw_11 * 10, y: gh_11 * 5 }, { x: gw_11 * 18, y: gh_11 * 12 }] },
    { color: 'green', arrData: [{ x: gw_11, y: gh_11 }, { x: gw_11 * 3, y: gh_11 * 4 }, { x: gw_11 * 5, y: gh_11 * 2 }, { x: gw_11 * 7, y: gh_11 * 8 }, { x: gw_11 * 18, y: gh_11 * 4 }] }
  ];
  arr_11.forEach((item) => {
    ctx11.beginPath();
    ctx11.strokeStyle = item.color;// 设置线条颜色
    ctx11.moveTo(item.arrData[0].x, item.arrData[0].y);//第一项起点坐标
    item.arrData.forEach((item2) => {
      ctx11.lineTo(item2.x, item2.y);
    });
    ctx11.stroke();
  })

  // 12.canvas绘制贝塞尔曲线
  let canvas12 = document.getElementById("canvas12");
  let ctx12 = canvas12.getContext("2d")
  ctx12.strokeStyle = "#1572b5";
  ctx12.lineWidth = 2;
  ctx12.beginPath();
  ctx12.moveTo(48, 39);
  ctx12.quadraticCurveTo(126, 9, 20, 136);
  ctx12.stroke();// 顺序很重要
  ctx12.closePath();

  // 13.canvas绘制线性渐变
  let canvas13 = document.getElementById("canvas13");
  let ctx13 = canvas13.getContext("2d");
  let linearGradient = ctx13.createLinearGradient(0, 0, 180, 180);// createLinearGradient:创建线性渐变 ;x1,y1,x2,y2:渐变的起点和终点
  linearGradient.addColorStop(0, "red");// addColorStop:添加颜色停止点 ;offset:颜色停止点的位置0-1 ;color:颜色值
  linearGradient.addColorStop(0.5, "green");
  linearGradient.addColorStop(1, "blue");
  ctx13.fillStyle = linearGradient;
  ctx13.fillRect(0, 0, 180, 180);// 渐变矩形

  // 14.canvas绘制放射性(径向)渐变
  let canvas14 = document.getElementById("canvas14");
  let ctx14 = canvas14.getContext("2d");
  let radialGradient = ctx14.createRadialGradient(90, 90, 0, 90, 90, 90);// createRadialGradient:创建径向渐变 ;x1,y1,r1,x2,y2,r2:渐变的起点和终点和半径
  radialGradient.addColorStop(0, "red");
  radialGradient.addColorStop(0.5, "orange");
  radialGradient.addColorStop(1, "blue");
  ctx14.fillStyle = radialGradient;
  ctx14.fillRect(0, 0, 180, 180);// 渐变矩形

  // 15.canvas绘制图像裁剪动画
  let canvas15 = document.getElementById("canvas15");
  let ctx15 = canvas15.getContext("2d");
  let img15 = new Image();
  img15.src = 'https://s1.ax1x.com/2022/08/06/vuFK8s.jpg';
  img15.onload = function () {
    let i = 0;// 图片切片的起始位置
    setInterval(() => {
      // context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
      // img:图片对象 ;sx,sy:图片的裁剪起点 ;swidth,sheight:图片要裁剪的宽高 ;x,y:图片的坐标 ;width,height:原2图片的宽高 ;
      ctx15.drawImage(img15, 150 * i, 0, 1796, 180, 0, 0, 1796, 180);
      i++;
      // 当图片宽度裁剪完后，重置i的值，重新开始裁剪
      if (i == 12) { i = 0 }
    }, 100);
  }

  // 16.canvas绘制柱状图
  let canvas16 = document.getElementById("canvas16");
  let ctx16 = canvas16.getContext("2d");
  // 坐标系的尺寸
  const width_16 = 180;
  const height_16 = 180;
  // 网格的尺寸
  const gridWidth_16 = 10;
  const gridHeight_16 = 10;
  // 网格的行数和列数
  const row_16 = Math.floor(width_16 / gridWidth_16);// 向下取整
  const col_16 = Math.floor(height_16 / gridHeight_16);
  // 绘制网格行
  for (let i = 0; i <= row_16; i++) {
    ctx16.beginPath();// 开启独立的绘制路径
    ctx16.moveTo(0, i * gridHeight_16);
    ctx16.lineTo(width_16, i * gridHeight_16);
    ctx16.strokeStyle = "#eee";// 设置线条颜色
    ctx16.stroke();
  }
  // 绘制网格列
  for (let i = 0; i <= col_16; i++) {
    ctx16.beginPath();
    ctx16.moveTo(i * gridWidth_16, 0);// moveTo:移动到某个坐标点 ;x,y:坐标点
    ctx16.lineTo(i * gridWidth_16, height_16);// lineTo:绘制线 ;x,y:终点坐标
    ctx16.strokeStyle = "#eee";// 设置线条颜色
    ctx16.stroke();
  }
  // 绘制x轴箭头线
  ctx16.beginPath();
  ctx16.strokeStyle = "#000";// 设置线条颜色
  ctx16.moveTo(gridWidth_16, height_16 - gridHeight_16);
  ctx16.lineTo(width_16 - gridWidth_16, height_16 - gridHeight_16);
  ctx16.stroke();
  // 绘制y轴箭头线
  ctx16.beginPath();
  ctx16.strokeStyle = "#000";// 设置线条颜色
  ctx16.moveTo(gridWidth_16, gridHeight_16);
  ctx16.lineTo(gridWidth_16, height_16 - gridHeight_16);
  ctx16.stroke();
  // 绘制x轴和y轴的文字
  ctx16.font = "16px Arial";// 设置字体大小和字体
  ctx16.fillStyle = "#000";// 设置填充字体颜色
  ctx16.textAlign = "center";// 设置文字的对齐方式
  ctx16.textBaseline = "middle";// 设置文字的基线方式
  ctx16.fillText("x", width_16 - gridWidth_16, height_16 - gridHeight_16 * 2);// fillText:绘制文本 ;text:文本内容 ;x,y:文本的坐标
  ctx16.fillText("y", gridWidth_16 * 2, gridHeight_16);
  ctx16.fillText("柱状图", width_16 / 2, gridHeight_16 * 2);
  // 绘制柱状图
  ctx16.beginPath();
  ctx16.fillStyle = "red";// 设置填充字体颜色
  ctx16.fillRect(20, 180 - 50, 20, 40);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height:矩形的宽高
  ctx16.fillStyle = "blue";// 设置填充字体颜色
  ctx16.fillRect(50, 180 - 30, 20, 20);
  ctx16.fillStyle = "yellow";// 设置填充字体颜色
  ctx16.fillRect(80, 180 - 140, 20, 130);
  ctx16.fillStyle = "red";// 设置填充字体颜色
  ctx16.fillRect(110, 180 - 70, 20, 60);
  ctx16.fillStyle = "blue";// 设置填充字体颜色
  ctx16.fillRect(140, 180 - 110, 20, 100);

  // 17.canvas绘制圆形图
  let canvas17 = document.getElementById("canvas17");
  let ctx17 = canvas17.getContext("2d");
  // 扇区
  let section = [
    // 圆外阴影
    { x: 90, y: 90, r: 62, start: 0, end: 360, color: "rgba(0,0,0,0.5)" },
    // 扇区
    { x: 90, y: 90, r: 60, start: 0, end: 50, color: "red" },
    { x: 90, y: 90, r: 60, start: 50, end: 150, color: "blue " },
    { x: 90, y: 90, r: 60, start: 150, end: 210, color: "green" },
    { x: 90, y: 90, r: 60, start: 210, end: 260, color: "yellow" },
    { x: 90, y: 90, r: 60, start: 260, end: 280, color: "orange" },
    { x: 90, y: 90, r: 60, start: 280, end: 300, color: "purple" },
    { x: 90, y: 90, r: 60, start: 300, end: 360, color: "skyblue" },
    // 圆内阴影
    { x: 90, y: 90, r: 32, start: 0, end: 360, color: "rgba(0,0,0,0.5)" },
    // 中间白色的圆
    { x: 90, y: 90, r: 30, start: 0, end: 360, color: "white" },
  ];
  // 绘制圆形
  // x,y:圆心坐标 ;radius:半径 ;start:开始角度 ;end:结束角度 ;anticlockwise:顺时针或逆时针 ;color:填充颜色
  function drawSector(x, y, r, start, end, color) {
    ctx17.beginPath();
    ctx17.moveTo(x, y);//圆心坐标
    ctx17.arc(x, y, r, Math.PI / 180 * start, Math.PI / 180 * end, false);
    ctx17.fillStyle = color;
    ctx17.fill();
  }
  section.forEach((item) => {
    drawSector(item.x, item.y, item.r, item.start, item.end, item.color);
  });

  // 18.canvas绘制缩放图形
  let canvas18 = document.getElementById("canvas18");
  let ctx18 = canvas18.getContext("2d");
  // 绘制图形
  ctx18.fillStyle = "#000";// 设置填充字体颜色
  ctx18.fillRect(0, 0, 100, 100);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height
  ctx18.fill()
  // 缩放
  ctx18.beginPath();
  ctx18.fillStyle = "red";// 设置填充字体颜色
  ctx18.scale(0.5, 0.5);// 缩放图形 ;x,y:缩放的比例！！！必须在绘制前设置，否则无效！！！
  ctx18.fillRect(0, 0, 100, 100);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height
  ctx18.fill()

  // 19.canvas绘制旋转图形
  let canvas19 = document.getElementById("canvas19");
  let ctx19 = canvas19.getContext("2d");
  // 绘制图形
  ctx19.fillStyle = "#000";// 设置填充字体颜色
  ctx19.fillRect(0, 0, 100, 100);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height
  ctx19.fill()
  // 旋转
  ctx19.beginPath();
  ctx19.fillStyle = "red";// 设置填充颜色
  ctx19.rotate(Math.PI / 180 * 30);// 旋转图形 ;angle:旋转的角度！！！必须在绘制前设置，否则无效！！！
  ctx19.fillRect(0, 0, 100, 100);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height
  ctx19.fill()

  // 20.canvas绘制平移图形
  let canvas20 = document.getElementById("canvas20");
  let ctx20 = canvas20.getContext("2d");
  // 绘制图形
  ctx20.fillStyle = "#000";// 设置填充字体颜色
  ctx20.fillRect(0, 0, 100, 100);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height
  ctx20.fill()
  // 平移
  ctx20.beginPath();
  ctx20.fillStyle = "red";// 设置填充颜色
  ctx20.translate(50, 50);// 平移图形 ;x,y:平移的坐标！！！必须在绘制前设置，否则无效！！！
  ctx20.fillRect(0, 0, 100, 100);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height
  ctx20.fill()

  // 21.canvas绘制变形图形
  let canvas21 = document.getElementById("canvas21");
  let ctx21 = canvas21.getContext("2d");
  // 绘制图形
  ctx21.fillStyle = "#000";// 设置填充字体颜色
  ctx21.fillRect(0, 0, 100, 100);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height
  ctx21.fill()
  // 变形
  ctx21.beginPath();
  ctx21.fillStyle = "red";// 设置填充颜色
  // 变形图形 ;x轴的缩放比例 ;x轴的倾斜角度(顺时针) ;y轴的倾斜角度(逆时针) ;y轴的缩放比例 ;x轴的平移 ;y轴的平移
  ctx21.transform(0.8, Math.PI / 180 * 20, Math.PI / 180 * 20, 0.8, 0, 0);
  ctx21.fillRect(0, 0, 100, 100);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height
  ctx21.fill()

  // 22.canvas绘制复用图形
  let canvas22 = document.getElementById("canvas22");
  let ctx22 = canvas22.getContext("2d");
  // 绘制图形
  ctx22.fillStyle = "#000";// 设置填充字体颜色
  // 保存状态
  ctx22.save();// save:保存绘图状态(这里保存了颜色设置)
  ctx22.fillRect(0, 0, 90, 90);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height
  ctx22.fill()
  // 复用图形状态
  ctx22.beginPath();
  ctx22.fillStyle = "red";// 设置填充颜色
  ctx22.restore();// restore:恢复绘图状态（这里恢复了颜色设置）
  // ctx22.fillStyle = "red";// 设置填充颜色，重新设置就可以覆盖
  ctx22.fillRect(90, 90, 90, 90);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height
  ctx22.fill()

  // 23.canvas绘制清除画布
  let canvas23 = document.getElementById("canvas23");
  let ctx23 = canvas23.getContext("2d");
  // 绘制图形
  ctx23.fillStyle = "#000";// 设置填充字体颜色
  ctx23.fillRect(0, 0, 100, 100);// fillRect:绘制矩形 ;x,y:矩形的坐标 ;width,height
  ctx23.fill()
  document.getElementById("canvas23").onclick = function () {
    // 1. clearRect:清除画布指定内容 ;x,y:清除的坐标 ;width,height
    // ctx23.clearRect(0, 0, 50, 50);
    // 2. 重新设置画布尺寸,也可以达到清除画布的效果,高度或宽度其中一个改变就可以了
    canvas23.width = canvas23.width;
    canvas23.height = canvas23.height;
  }

  // 23.canvas绘制电子签名
  let canvas24 = document.getElementById("canvas24");
  let ctx24 = canvas24.getContext("2d");
  let right24 = document.getElementById("24");
  let lineWidth24 = '';// 画笔粗细
  let strokeStyle24 = '';// 画笔颜色
  let flag24 = false;// 是否绘制/橡皮擦状态
  //  添加操作元素
  right24.innerHTML = `
  <p>点击重绘</p>
  <button id="clear24">清除画布</button>
  <p>画笔颜色</p>
  <input id="color24" type='color'></input>
  <p>画笔粗细</p>
  <select id="size24">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
  </select>
  <p>画笔粗细</p>
  <input type="range" id="range24" min="1" max="50" value="1"></input>
  <p>橡皮擦</p>
  <button id="eraser24">🗑</button>
  `;
  // 清除画布事件
  document.getElementById("clear24").onclick = function () {
    canvas24.width = canvas24.width;
  }
  // 选择画笔颜色事件
  document.getElementById("color24").addEventListener("change", (e) => {
    strokeStyle24 = e.target.value;
    console.log(e.target.value);
  }, false);// false:不冒泡，true:冒泡
  // 画笔粗细事件
  document.getElementById("size24").onchange = function (e) {
    lineWidth24 = e.target.value;
    console.log(lineWidth24);
  }
  // 画笔粗细滑动事件
  document.getElementById("range24").onchange = function (e) {
    lineWidth24 = e.target.value;
    console.log(lineWidth24);
  }
  // 橡皮擦事件
  document.getElementById("eraser24").onclick = function () {
    flag24 = !flag24;
    // lineWidth24 = 20; // 自欺欺人式橡皮擦
    // strokeStyle24 = "#fff";
    if (flag24) {
      // 橡皮擦选中颜色改变
      document.getElementById("eraser24").style.backgroundColor = "red";
      // 注册鼠标按下事件
      canvas24.onmousedown = function () {
        // 注册鼠标移动事件
        canvas24.onmousemove = function (e) {
          // 1. 获取鼠标的坐标
          let x = e.offsetX;
          let y = e.offsetY;
          // 清除画布
          ctx24.clearRect(x, y, lineWidth24, lineWidth24);
        }
        // 注册鼠标抬起事件
        canvas24.onmouseup = function () {
          // 注销鼠标移动事件
          canvas24.onmousemove = null;
          // 注销鼠标抬起事件
          canvas24.onmouseup = null;
        }
      }
    } else {
      // 橡皮擦取消选中
      document.getElementById("eraser24").style.backgroundColor = "";
      // 先注销鼠标事件
      canvas24.onmousedown = null;
      canvas24.onmousemove = null;
      canvas24.onmouseup = null;
      // 再注册鼠标按下事件
      canvas24.onmousedown = function (e) {
        // 1. 获取鼠标的坐标
        let x = e.offsetX;
        let y = e.offsetY;
        // 2. 设置画笔的属性
        ctx24.strokeStyle = strokeStyle24;// 设置画笔颜色
        ctx24.lineWidth = lineWidth24;// 设置画笔宽度
        ctx24.lineCap = "round";// 设置画笔转弯处的形状，round:圆形，butt:方形，square:正方形
        ctx24.lineJoin = "round";// 设置画笔连接点的形状
        // 3. 开始绘制
        ctx24.beginPath();// 独立绘制路径
        // 4. 设置起点
        ctx24.moveTo(x, y);
        // 5. 注册鼠标移动事件
        canvas24.onmousemove = function (e) {
          // 1. 获取鼠标的坐标
          let x = e.offsetX;
          let y = e.offsetY;
          // 2. 绘制
          ctx24.lineTo(x, y);
          ctx24.stroke();
        }
        // 6. 注册鼠标抬起事件
        canvas24.onmouseup = function () {
          // 注销鼠标移动事件
          canvas24.onmousemove = null;
          // 注销鼠标抬起事件
          canvas24.onmouseup = null;
        }
      }
    }
    console.log(flag24);
  }
  // 注册鼠标按下事件
  canvas24.onmousedown = function (e) {
    // 1. 获取鼠标的坐标
    let x = e.offsetX;
    let y = e.offsetY;
    // 2. 设置画笔的属性
    ctx24.strokeStyle = strokeStyle24;// 设置画笔颜色
    ctx24.lineWidth = lineWidth24;// 设置画笔宽度
    ctx24.lineCap = "round";// 设置画笔转弯处的形状，round:圆形，butt:方形，square:正方形
    ctx24.lineJoin = "round";// 设置画笔连接点的形状
    // 3. 开始绘制
    ctx24.beginPath();// 独立绘制路径
    // 4. 设置起点
    ctx24.moveTo(x, y);
    // 5. 注册鼠标移动事件
    canvas24.onmousemove = function (e) {
      // 1. 获取鼠标的坐标
      let x = e.offsetX;
      let y = e.offsetY;
      // 2. 绘制
      ctx24.lineTo(x, y);
      ctx24.stroke();
    }
    // 6. 注册鼠标抬起事件
    canvas24.onmouseup = function () {
      // 注销鼠标移动事件
      canvas24.onmousemove = null;
      // 注销鼠标抬起事件
      canvas24.onmouseup = null;
    }
  }

  // canvas绘制验证码
  let canvas25 = document.getElementById("canvas25");
  let ctx25 = canvas25.getContext("2d");
  // 设置画布的宽高
  canvas25.width = 180;
  canvas25.height = 180;
  // 定义方法获取随机N位数字和字母混合的验证码
  function getCode25(N) {
    // 定义一个空字符串
    let code = '';
    // 定义一个数组包含0~9和a~z的大小写字母
    let arr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
    // 循环4次
    for (let i = 0; i < N; i++) {
      // 获取随机数
      let index = parseInt(Math.random() * arr.length);
      // 将随机数添加到空字符串中
      code += arr[index];
    }
    console.log(code);
    // 返回验证码字符串
    return code;
  }
  // 获取随机N位数验证码数组
  let code25 = getCode25(6);
  // 绘制验证码
  ctx25.font = "40px Arial";
  ctx25.fillStyle = "black";
  ctx25.fillText(code25, 0, 90);
  // 定义绘制干扰的方法 line:干扰线,dot:干扰点
  function interference25(line, dot) {
    // 绘制干扰线
    for (let i = 0; i < line; i++) {
      ctx25.beginPath();
      // 设置干扰线随机颜色
      ctx25.strokeStyle = "rgba(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ",0.4)";
      // 设置干扰线随机宽度，范围1~4
      ctx25.lineWidth = parseInt(Math.random() * 4) + 1;
      // 绘制干扰线
      ctx25.moveTo(Math.random() * 180, Math.random() * 180);
      ctx25.lineTo(Math.random() * 180, Math.random() * 180);
      ctx25.stroke();
    }
    // 绘制干扰点
    for (let i = 0; i < dot; i++) {
      ctx25.beginPath();
      // 设置干扰点随机颜色
      ctx25.fillStyle = "rgba(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ",0.2)";
      // 设置干扰点随机大小，范围1~4
      // arc(x轴,y轴,r半径,起始弧度,终止弧度)
      ctx25.arc(Math.random() * 180, Math.random() * 180, parseInt(Math.random() * 4) + 1, 0, 2 * Math.PI);
      ctx25.fill();
    }
  }
  // 调用干扰方法,传入干扰参数
  interference25(100, 200);
  // 添加鼠标点击事件,重新绘制验证码
  canvas25.onclick = function () {
    // 清空画布
    ctx25.clearRect(0, 0, canvas25.width, canvas25.height);
    // 获取随机N位数验证码
    code25 = getCode25(6);
    // 绘制验证码
    ctx25.font = "40px Arial";
    ctx25.fillStyle = "black";
    ctx25.fillText(code25, 0, 90);
    // 调用干扰方法,传入干扰参数
    interference25(100, 200);
  }





  // direction: "ltr" // 文本方向，默认ltr，左到右，rtl，右到左
  // fillStyle: "#ffff00" // 填充颜色，默认黑色
  // filter: "none" // 图像过滤器，默认none，不使用过滤器，可选值："none"、"blur"、"grayscale"、"invert"、"opacity"、"brightness"、"contrast"、"blur"、"hue-rotate"、"saturate"、"sepia"、"drop-shadow"、"color-matrix"、"matrix"、"custom"
  // font: "10px sans-serif" // 字体，默认10px sans-serif
  // fontKerning: "auto" // 字体字距，默认auto，自动计算字距
  // fontStretch: "normal" // 字体拉伸，默认normal，正常
  // fontVariantCaps: "normal" // 字体大小写，默认normal，正常
  // globalAlpha: 1 // 透明度，默认1，不透明
  // globalCompositeOperation: "source-over" // 图像合成操作，默认source-over，可选值："source-over"、"source-in"、"source-out"、"source-atop"、"destination-over"、"destination-in"、"destination-out"、"destination-atop"、"lighter"、"copy"、"xor"、"multiply"、"screen"、"overlay"、"darken"、"lighten"、"color-dodge"、"color-burn"、"hard-light"、"soft-light"、"difference"、"exclusion"、"hue"、"saturation"、"color"、"luminosity"
  // imageSmoothingEnabled: true // 图像平滑处理，默认true，开启
  // imageSmoothingQuality: "low" // 图像平滑处理，默认low，低质量
  // letterSpacing: "0px" // 字体字距，默认0px
  // lineCap: "butt" // 线条端点，默认butt，平直
  // lineDashOffset: 0 // 线条虚线偏移量，默认0
  // lineJoin: "miter" // 线条交叉点，默认miter，尖角
  // lineWidth: 1 // 线条宽度，默认1
  // miterLimit: 10 // 线条交叉点，默认10
  // shadowBlur: 0 // 阴影模糊度，默认0
  // shadowColor: "rgba(0, 0, 0, 0)" // 阴影颜色，默认黑色
  // shadowOffsetX: 0 // 阴影横向偏移，默认0
  // shadowOffsetY: 0 // 阴影纵向偏移，默认0
  // strokeStyle: "#000000" // 线条颜色，默认黑色
  // textAlign: "start" // 文本水平对齐，默认start，左对齐
  // textBaseline: "alphabetic" // 文本垂直对齐，默认alphabetic，基线
  // textRendering: "auto" // 文本渲染精度，默认auto，自动
  // wordSpacing: "0px" // 单词间距，默认0px
})
</script>

<style lang="less" scoped>
.title {
  height: 200px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: white;
  white-space: nowrap;
  text-transform: uppercase;
  // animation: flip-horizontal-top 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) alternate infinite;
  animation: bounce-in-top 1.5s both;

  // 翻转动画
  @keyframes flip-horizontal-top {
    0% {
      transform: rotateX(0);
    }

    50% {
      transform: rotateX(180deg);
    }

    100% {
      transform: rotateX(360deg);
    }
  }

  // 物理跌落动画
  @keyframes bounce-in-top {
    0% {
      transform: translateY(-500px);
      animation-timing-function: ease-in;
      opacity: 0;
    }

    38% {
      transform: translateY(0);
      animation-timing-function: ease-out;
      opacity: 1;
    }

    55% {
      transform: translateY(-65px);
      animation-timing-function: ease-in;
    }

    72% {
      transform: translateY(0);
      animation-timing-function: ease-out;
    }

    81% {
      transform: translateY(-28px);
      animation-timing-function: ease-in;
    }

    90% {
      transform: translateY(0);
      animation-timing-function: ease-out;
    }

    95% {
      transform: translateY(-8px);
      animation-timing-function: ease-in;
    }

    100% {
      transform: translateY(0);
      animation-timing-function: ease-out;
    }
  }
}

.canvas-container {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  // 设计来源 https://webgradients.com/ 和 https://uigradients.com/
  // background: linear-gradient(to bottom, #2193b0, #6dd5ed);
}

.canvas_box {
  display: flex;
  align-items: center;
  width: 400px+10px;
  height: 200px;
  border-radius: 10px;
  // 设计来源 https://getcssscan.com/css-box-shadow-examples?ref=producthunt
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  margin: 10px;
  padding: 10px;
  background-color: white;
  // 过渡效果
  transition: all 0.3s ease;

  // 移入移出效果
  &:hover {
    transform: translateY(-5px);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
  }

  .left_box {
    width: 200px;
    height: 100%;
    // background: pink;
    box-sizing: border-box;
    border: 10px solid pink;
    border-radius: 10px;
    cursor: pointer; // 小手
  }

  .right_box {
    flex: 1; //占满剩余空间
    height: 100%;
    // background: goldenrod;
    box-sizing: border-box;
    border: 10px solid goldenrod;
    border-radius: 10px;
    overflow-wrap: anywhere; //自动换行
    text-align: center; //水平居中
    margin-left: 10px; //左边距,盒子间隔
  }
}
</style>